<template>
  <div>
    <EditBtn :selected='selected'/>
    <router-view name="role"></router-view>
    <el-table
      :data="roleData"
      height="500"
      border
      style="width: 100%"
      @selection-change="handleSlectionChange"
    >
      <el-table-column type='selection'></el-table-column>
      <el-table-column
        prop="id"
        label="ID"
        width="80">
      </el-table-column>
      <el-table-column
        prop="rolename"
        label="管理角色"
        width="120">
      </el-table-column>
      <el-table-column
        prop="roleorder"
        label="序号"
        width="150">
      </el-table-column>
      <el-table-column
        prop="allowpathname"
        label="管理权限">
      </el-table-column>
    </el-table>  
    <el-footer class="block" height=''>
      <el-pagination
        @current-change="getRoleData"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="rowsTotal">
      </el-pagination>
    </el-footer>
  </div>
</template>
<script>
export default {
  created(){
    this.getRoleData()
  },
  data(){
    return {
      roleData:[],
      currentPage:1,
      pageSize:10,
      rowsTotal:1,
      selected:[]
    }
  },
  // activated(){
  //   alert(2)
  //   this.getRoleData()
  // },
  // 页面重加载时刷新
  watch:{
    $route(to,from){       
      if(to.path =='/role/index'){
        this.getRoleData()
      }
    }
  },
  // computed:{
  //   roleData(){
  //     // if(this.$store.state.update){
  //     //   this.getRoleData()
  //     // }else{

  //     //   this.getRoleData()
  //     // }
  //     this.getRoleData(this.currentPage)
  //     return this.currentData
  //   }
  // },
  methods:{
    //查询当前路由的子路由
    handleSlectionChange(select){
      this.selected=select
    },
    // 异步请求获取数据
    getRoleData(val){
      this.axios.get('/api/role/getdata/',{
        params:{
          currentpage:val,
          pagesize:this.pagesize
        }
      }).then((res)=>{
        if(res.data.code==0){
          const data=res.data.data
          // 初始化数据
          this.roleData=data.listdata
          this.$store.state.update=false
          this.currentpage=parseInt(data.currentpage) 
          this.pagesize=parseInt(data.pagesize)
          this.rowsTotal=parseInt(data.totalrows)
        }else{
          this.message('服务器忙，请稍后重试','error')
        }
      }).catch((error)=>{
        this.message('服务器忙，请稍后重试','error')
      })
    },
    // 失败提示
    message(msg,type){
      this.$message({
        message:msg,
        type
      })
    }
  }
}
</script>
<style scoped>

</style>
